import { useMovieStore } from '@/common/hox/movieStore';

import { Image } from '@tarojs/components';
import classNames from 'classnames';
import React, { useMemo } from 'react';
import styles from './index.module.less';

type SeatRenderPropsType = {
    headerExtra: React.ReactNode;
    scaleLeft: number;
    scale: number;
    seatData: Array<Array<Movie.IsvFilmSeatDatum | null>>;
    seatType: any;
};
function SeatRender(props: SeatRenderPropsType) {
    const { headerExtra, scaleLeft, seatData, seatType } = props;
    const {
        seat: { seatList, handleClickSeats },
    } = useMovieStore((store) => [store.seat.seatList, store.seat.handleClickSeats]);

    const renderSeatData = useMemo(() => Array.from(seatData), [seatData]);
    return (
        <div className={styles.seatRender}>
            <div className={styles.header}>{headerExtra}</div>
            <div className={styles.content}>
                <div className={styles.rowGuid} style={{ left: `${scaleLeft}px` }}>
                    {renderSeatData.map((rowData, rowIndex) => {
                        if (!rowData || rowData.length <= 0) {
                            return null;
                        }
                        const { seatNo } = rowData.find((item) => !!item?.seatNo) || {};
                        const rowGuid =
                            (seatNo && seatNo.includes('排') && seatNo.split('排')[0]) ||
                            rowIndex + 1;
                        return (
                            <div className={styles.guidItem} key={rowIndex}>
                                {rowGuid}
                            </div>
                        );
                    })}
                </div>

                <div className={styles.scrollContent}>
                    <Image
                        className={styles.picScreen}
                        src="https://fulu-media.oss-cn-hangzhou.aliyuncs.com/public/icon/71fc15429d0a455c.png"
                    />
                    <Image
                        id="pic-center"
                        className={styles.picCenter}
                        src="https://fulu-media.oss-cn-hangzhou.aliyuncs.com/public/icon/f31a5e1efe385709.png"
                    />
                    <div className={styles.seatContent}>
                        {renderSeatData.map((rowData, rowIndex) => {
                            if (!rowData || rowData.length <= 0) return null;
                            const renderRowData = Array.from(rowData);
                            return (
                                <div className={styles.seatRow} key={rowIndex}>
                                    {renderRowData.map((seatData, columnIndex) => {
                                        if (!seatData) {
                                            return columnIndex == 0 ? null : (
                                                <div
                                                    className={styles.seatItemBox}
                                                    key={`empty-${rowIndex}-${columnIndex}`} // 添加前缀避免冲突
                                                ></div>
                                            );
                                        }
                                        const { status, loveStatus, sectionId, seatId } = seatData;
                                        const uniqueKey = `seat-${rowIndex}-${columnIndex}-${
                                            seatId || 'null'
                                        }`;
                                        const isLoveSeat = [1, 2].includes(loveStatus);
                                        const color =
                                            seatType.find((item) => item.sectionId === sectionId)
                                                ?.seatTypeColor || '#FFD5B1';
                                        const isSelect = !!seatList.find(
                                            (item) => item.seatId == seatData.seatId
                                        );
                                        return (
                                            <div className={styles.seatItemBox} key={uniqueKey}>
                                                <div
                                                    className={classNames(styles.seatItem, {
                                                        // 可售
                                                        [styles.validSeat]: status == 'N',
                                                        // 已售
                                                        [styles.soldOut]: status == 'LK',
                                                        // 不可售 不确定 CO 这个状态是什么
                                                        [styles.overPriceSeat]: [
                                                            'CO',
                                                            'E',
                                                        ].includes(status),
                                                        // 情侣坐
                                                        [styles.loveSeat]: isLoveSeat,
                                                        // 情侣坐 - 左
                                                        [styles.loveLeft]: loveStatus == 1,
                                                        // 情侣坐 - 右
                                                        [styles.loveRight]: loveStatus == 2,
                                                        // 已选择
                                                        [styles.selected]: isSelect,
                                                    })}
                                                    style={
                                                        {
                                                            '--seatColor': color,
                                                        } as React.CSSProperties
                                                    }
                                                    onClick={() => {
                                                        if (status == 'N') {
                                                            if (isLoveSeat) {
                                                                let otherSeat: Movie.IsvFilmSeatDatum | null =
                                                                    null;
                                                                if (loveStatus == 1)
                                                                    otherSeat =
                                                                        renderRowData[
                                                                            columnIndex + 1
                                                                        ];
                                                                if (loveStatus == 2)
                                                                    otherSeat =
                                                                        renderRowData[
                                                                            columnIndex - 1
                                                                        ];
                                                                otherSeat &&
                                                                    handleClickSeats([
                                                                        seatData,
                                                                        otherSeat,
                                                                    ]);
                                                            } else {
                                                                handleClickSeats([seatData]);
                                                            }
                                                        }
                                                    }}
                                                ></div>
                                            </div>
                                        );
                                    })}
                                </div>
                            );
                        })}
                    </div>
                </div>
            </div>
        </div>
    );
}

export default SeatRender;
